// ColorText.qml
import QtQuick 2.9


Item {
        id: root
        //一个组件中只有根对象的属性可以在外部被调用，也就是说，ColorText.qml文件中创建的 Text 对象和
        //其他 Rectangle对象中的属性是无法在main.qml中定义的 ColorText 对象中调用的。
        //要想在外部访问组件内子对象的属性，需要通过在根对象中自定义属性来实现。
        //自定义属性
        //[default] property <propertyType> <propertyName> : <value>
        property string mycolorText // 定义一个string类型的colorText自定义属性

        //属性导出的第二种方法
        //属性别名更适合将组件内子对象属性暴露给外部对象
        //[default] property alias <name>: <alias reference>
        property alias mytextFont: text1.font // 属性别名

        //自定义信号格式
        //如果信号有参数，那么参数类型必须声明，如果没有参数，那么可以省略后面的小括号。
        //signal <signalName>[([<type> <parameter name>[, ...]])]
        signal myclicked(string buttonColor) //自定义信号

        //自定义函数
        //function <functionName>([<parameterName>[, ...]]) { <body> }
        function changeDuration(duration) {
            console.log("改变速度: ", duration)
            animation.duration = duration
        }


        Text {
            id: text1 //id 值必须使用小写字母或者下划线开头，并且不能使用字母、数字和下划线以外的字符
//            text: qsTr("hello QML!")
            text: mycolorText // 使用自定义属性
            anchors.centerIn: parent //锚布局

            font.bold: true //点标记方式为单一子属性赋值
            font { pointSize: 14; capitalization: Font.AllUppercase } //组标记法来赋值

            //动画持续效果
            Behavior on rotation {
                NumberAnimation { id: animation; duration: 500 }
            }
        }

        //自定义响应函数
        onMyclicked: {
                console.log("我的自定义响应函数: ")
        }

        //自定义函数
        function myTestFunc(strMsg) {
            console.log("我的自定义函数函数: ", strMsg)
        }



        //圆形按钮
        Rectangle {
            id: colorRect
            width: 20 * 2
            height: width //属性绑定，当 width 的值改变时，height 属性的值会跟随变化
            radius: 20
    //        color: "green"
            border.color: "green"

            anchors.left: text1.right
            anchors.leftMargin: 10
            anchors.verticalCenter: text1.verticalCenter

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.debug("colorRect: ", parent.border.color)
                    text1.rotation += 360
                    text1.color = parent.border.color
//                    backImg.source = "images/bg2.png"
                    root.myclicked(parent.border.color) //发射自定义信号
                }

                hoverEnabled: true
                onEntered: {
                    parent.width = 32
                    parent.color = "black"
                }
                onExited: {
                    parent.width = 40
                    parent.color = "white"
                }
            }

            Rectangle {
                    width: 12 * 2
                    height: width
                    radius: 12
                    color: parent.border.color
                    anchors.centerIn: parent
                }
        }

        //圆形按钮
        Rectangle {
            id: colorRect2
            width: 20 * 2
            height: width //属性绑定，当 width 的值改变时，height 属性的值会跟随变化
            radius: 20
    //        color: "green"
            border.color: "#ff0000"

            anchors.right: text1.left
            anchors.rightMargin: 10
            anchors.verticalCenter: text1.verticalCenter

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.debug("colorRect2: ", parent.border.color)
                    text1.rotation += 360
                    text1.color = parent.border.color
//                    backImg.source = "images/bg2.png"
                    root.myclicked(parent.border.color)
                }

                hoverEnabled: true
                onEntered: {
                    parent.width = 32
                    parent.color = "black"
                }
                onExited: {
                    parent.width = 40
                    parent.color = "white"
                }
            }

            Rectangle {
                    width: 12 * 2
                    height: width
                    radius: 12
                    color: parent.border.color
                    anchors.centerIn: parent
                }
        }

        //圆形按钮
        Rectangle {
            id: colorRect3
            width: 20 * 2
            height: width //属性绑定，当 width 的值改变时，height 属性的值会跟随变化
            radius: 20
    //        color: "green"
            border.color: "#0000ff"

            anchors.bottom: text1.top
            anchors.bottomMargin: 50
            anchors.horizontalCenter: text1.horizontalCenter

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.debug("colorRect3: ", parent.border.color)
                    text1.rotation += 360
                    text1.color = parent.border.color
//                    backImg.source = "images/bg2.png"
                    root.myclicked(parent.border.color)
                }

                hoverEnabled: true
                onEntered: {
                    parent.width = 32
                    parent.color = "black"
                }
                onExited: {
                    parent.width = 40
                    parent.color = "white"
                }
            }

            Rectangle {
                    width: 12 * 2
                    height: width
                    radius: 12
                    color: parent.border.color
                    anchors.centerIn: parent
                }
        }

//QML的编码约定

//        id
//        属性声明
//        信号声明
//        JavaScript函数
//        对象属性
//        子对象
//        状态
//        状态切换
        Rectangle {
            id: photo //  id放在第一行，便于找到一个对象

            property bool thumbnail: false //属性声明
            property alias image: photoImage.source

            signal clicked // 信号声明

            function doSomething(x) // javascript 函数
            {
                return x + photoImage.width
            }

            color: "gray" // 对象属性
            x: 20; y: 20; height: 150 // 相关属性放在一起
            width: { // 绑定
                if (photoImage.width > 200) {
                    photoImage.width;
                } else {
                    200;
                }
            }

            Rectangle { // 子对象
                id: border
                anchors.centerIn: parent; color: "white"

                Image { id: photoImage; anchors.centerIn: parent }
            }

            states: State { // 状态
                name: "selected"
                PropertyChanges { target: border; color: "red" }
            }

            transitions: Transition { //过渡
                from: ""; to: "selected"
                ColorAnimation { target: border; duration: 200 }
            }
        }


//        如果使用了一组属性中的多个属性，那么使用组表示法，而不要使用点表示法，这样可以提高可读性。例如：
        /*
        //原始
        Rectangle {
            anchors.left: parent.left; anchors.top: parent.top;
            anchors.right: parent.right; anchors.leftMargin: 20
        }

        Text {
            text: "hello"
            font.bold: true; font.italic: true; font.pixelSize: 20;
            font.capitalization: Font.AllUppercase
        }
        //优化
        Rectangle {
              anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: 20 }
          }

        Text {
              text: "hello"
              font { bold: true; italic: true; pixelSize: 20; capitalization: Font.AllUppercase }
          }
        */

//        如果一个列表只包含一个元素，那么我们通常忽略方括号。例如下面的代码：
        /*
//        原始
        states: [
            State {
                name: "open"
                PropertyChanges { target: container; width: 200 }
            }
        ]

        // 优化
        states: State {
            name: "open"
            PropertyChanges { target: container; width: 200 }
        }
        */
        /*
        如果脚本是一个单独的表达式，建议直接使用：

        Rectangle { color: "blue"; width: parent.width / 3 }

        如果脚本只有几行，那么建议写成一块：

        Rectangle {
            color: "blue"
            width: {
                var w = parent.width / 3
                console.debug(w)
                return w
            }
        }

        如果脚本有很多行，或者需要被不同的对象使用，那么建议创建一个函数，然后像下面这样来调用它：

        function calculateWidth(object)
        {
            var w = object.width / 3
            // ...
            // more javascript code
            // ...
            console.debug(w)
            return w
        }

        Rectangle { color: "blue"; width: calculateWidth(parent) }

        如果是很长的脚本，我们可以将这个函数放在独立的 JavaScript 文件中，然后像下面这样来导入它：

        import "myscript.js" as Script

        Rectangle { color: "blue"; width: Script.calculateWidth(parent) }
        */
}
